<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.color-2.1.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="js/swiper.js"></script>


    <script type="text/javascript" src="myjs/ajaxutils.js"></script>
    <script type="text/javascript" src="myjs/base.js"></script>
    <script type="text/javascript" src="myjs/course_manage.js"></script>
    <script type="text/javascript" src="myjs/domobject.js"></script>
    <!--    <script type="text/javascript" src="js/swiper.esm.js"></script>-->
    <!--    <script type="text/javascript" src="js/swiper.esm.bundle.js"></script>-->

    <!--    <script type="text/javascript" src="js/popper.min.js"></script>-->
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-reboot.css"/>
    <link rel="stylesheet" href="css/bootstrap-grid.css"/>
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="mycss/base.css">
    <link rel="stylesheet" href="mycss/course_manage.css">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">-->
    <!--    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>-->
    <!--    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>-->
    <!--    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>-->

</head>
<body>
<nav id="nav_bar" class="navbar navbar-expand-md bg-dark navbar-dark justify-content-center align-items-center">
    <!-- Brand -->
    <div class="d-flex  justify-content-center align-items-center flex-wrap" style="width: 95rem;margin: 0 auto">
        <a class="navbar-brand my-auto" href="#" style="font-size: 1.8rem;font-weight: bold">
            <!--            <img src="https://edu-image.nosdn.127.net/C0124E0336721FF65563B76A16A8143F.png?imageView&thumbnail=190y28&quality=100"-->
            <!--                 alt="Logo">-->
            <span class="glyphicon glyphicon-book" style="color: lawngreen"></span> Elearning
        </a>

        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->
        <div class="collapse navbar-collapse justify-content-between" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">首页</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">所有课程</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">我的课程</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">直播课程</a>
                </li>
            </ul>

            <div id="search_bar" class="form-inline d-flex justify-content-center sm-hide">
                <input class="form-control " type="text" placeholder="搜索课程"/>
                <button class="btn btn-primary" type="submit">搜索</button>
            </div>
            <div id="head_div"
                 class="text-center d-flex justify-content-center align-items-center position-relative sm-hide"
                 style="height: 45px;width: 130px;">
                <div id="alarm_ico_div">
                    <a id="alarm_ico" href="#" class="p-1 m-2" style="font-size: 25px;position: relative">
                        <span id="alarm_ico_word" class="glyphicon glyphicon-bell"></span>
                        <span id="alarm_ico_count" style="color: white;text-decoration: none">99</span>
                    </a>
                </div>
                <img class="user_head_img" id="user_head" src="resources/test_head.png"
                     style="width: 44px;height: 44px;border: 2px solid #343a40;cursor: pointer" alt="头像">
                <!--用户菜单悬浮框-->
                <div id="user_flex" class="card m-0" style="overflow: hidden;right: 0;top: 100%">
                    <div class="card-body d-flex justify-content-center flex-wrap">
                        <div id="user_head_name" class="d-flex">
                            <img class="user_head_img" alt="头像"/>
                            <div class="ml-4">
                                <h4 class="user_name_all" id="flex_user_name" style="font-size: 1.5rem"></h4>
                                <span style="font-size: 13px;color: #6c757d">手机号:</span><span class="user_phone_all"
                                                                                              id="flex_user_phone"
                                                                                              style="font-size: 13px;color: #6c757d"></span>
                            </div>
                        </div>
                        <div id="user_flex_btn_div" class="p-1 mt-2 d-flex flex-wrap justify-content-around">
                            <a href="userinfo.html#/user/courses_info" class="user_flex_btn">
                                <span class="glyphicon glyphicon-book"></span>
                                <span>&ensp;我的课程</span>
                            </a>
                            <a href="userinfo.html#/user/order_info" class="user_flex_btn">
                                <span class="glyphicon glyphicon-list-alt"></span>
                                <span>&ensp;订单管理</span>
                            </a>
                            <a href="#" class="user_flex_btn mt-2">
                                <span class="glyphicon glyphicon-upload"></span>
                                <span>&ensp;发布课程</span>
                            </a>
                            <a href="userinfo.html#/user/user_info" class="user_flex_btn mt-2">
                                <span class="glyphicon glyphicon-cog "></span>
                                <span>&ensp;个人设置</span>
                            </a>
                        </div>
                        <button type="button" class="btn btn-primary mx-auto mt-1" style="border-radius: 100px;">开启直播
                        </button>
                        <button type="button" class="btn btn-danger mx-auto mt-1" style="border-radius: 100px;">注销登录
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
<div id="main_div" class="">
    <div id="course_model_div">
        <div class="jumbotron p-4">
            <h1 class="p-0 ml-5">课程管理</h1>
        </div>
        <div id="course_info_div" class="mx-auto d-flex my-5 justify-content-between align-items-center">
            <div data-toggle="modal"
                 data-target="#edit_course_img_modal" id="course_img_div" class="position-relative"
                 style="cursor: pointer">
                <img model="courseImage" model_target="src" id="course_img" class="course_img"
                >
                <div id="modify_course_img_div_flex" class="position-absolute bg-dark">
                    修&ensp;改&ensp;封&ensp;面
                </div>
            </div>
            <div id="course_text_info_div">
                <h3 model="courseName" id="course_name" class="mb-3"></h3>
                <div id="label_div" class="course_label_div mb-3">
                    <span model="labelFirst" class="course_label label_first"></span>
                    <span model="labelSecond" class="course_label label_second"></span>
                    <span model="labelThird" class="course_label label_third"></span>
                </div>
                <div id="course_learn_info_div" class="d-flex justify-content-between">
                    <span>课程状态 : <span model="courseState" model_class='courseStateColor'
                                       class="course_state_open green_font_color">开放中</span></span>
                    <span>价格 : <span model="cost" class="course_price"></span></span>
                    <span>学习人数 : <span model="learnTotal" class="learn_count gray_font_color"></span></span>
                    <span>评论 : <span model="commentTotal" class="comment_count gray_font_color">0</span></span>
                    <!--                                <span class="last_time_label">3 : 12</span>-->
                </div>
            </div>
            <p class="start_time_label p-2"><span>发布时间 : </span><span
                    class="gray_font_color" model="courseTime"></span></p>
            <div class="button-div d-flex flex-wrap" style="width: 6rem">
                <button id="course_info_edit_btn" class="btn btn-primary my-1" data-toggle="modal"
                        data-target="#edit_course_info_modal">编辑信息
                </button>
                <button id="withdraw_course_btn" class="btn btn-danger my-1" data-toggle="modal"
                        data-target="#delete_published_course_modal">下架课程
                </button>
            </div>
            <!--确认删除发布模态-->
            <div class="modal fade mx-auto my-auto" id="delete_published_course_modal">
                <div class="modal-dialog modal-dialog-centered" style="min-width: 40rem;">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">提醒</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body" style="text-align: center;font-size: 1.5rem">
                            你确定要下架这门课程吗?
                        </div>
                        <div class="modal-footer">
                            <button id="delete_course_btn" type="button" class="btn btn-danger">下架
                            </button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="course_desc_div" class="mx-auto">
            <p>课程简介:</p>
            <textarea model="courseIntroduction" id="user_introduction_label" class="form-control" rows="5" id="comment"
                      disabled="disabled"
                      style="resize: none" placeholder="未填写课程简介"></textarea>
        </div>
    </div>
    <!-- 修改课程封面模态框 -->
    <div class="modal fade mx-auto my-auto" id="edit_course_img_modal">
        <div class="modal-dialog modal-dialog-centered" style="min-width: 40rem;">
            <!-- modal-dialog-centered 可以使模态框居中显示  设置宽度要在modal-dialog里指定min-width才有效 -->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改课程封面</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body d-flex">
                    <div id="head_upload_preview_div">
                        <img id="course_img_ediv" class="course_img">
                    </div>
                    <div class="mx-auto my-auto">
                        <label id="upload_course_img_btn" for="course_img_edit" class="p-2 my_button my_button_primary">选择图片</label>
                        <input type="file" id="course_img_edit" name="file" style="display:none">
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="apply_head_btn" type="button" class="btn btn-primary">
                        应用
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--    章节滑动窗口-->
    <div class="center_div mt-3">
        <p>章节信息:</p>
    </div>
    <div id="swiper-container" class="swiper-container my-3">
        <div class="swiper-wrapper">
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!--修改章节模态-->
    <div class="modal fade mx-auto my-auto" id="edit_chapter_modal">
        <div class="modal-dialog modal-dialog-centered" style="min-width: 40rem;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">修改章节</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="chapter_reupload_div" class="p-4">
                        <div id="video_name" style="text-align: center" class="gray_font_color mb-2">未选择文件</div>
                        <div class="mx-auto my-auto d-flex justify-content-center">
                            <label id="upload_course_video_btn" for="course_video_reload"
                                   class="p-2 my_button my_button_primary">选择视频</label>
                            <input type="file" id="course_video_reload" name="file" style="display:none">
                        </div>
                        <div class="d-flex justify-content-center gray_font_color m-1">
                            <span>文件大小&ensp;:&ensp;</span><span id="reupload_file_size">0 M</span>
                        </div>
                        <div class="progress">
                            <div id="upload_progress_bar"
                                 class="progress-bar progress-bar-striped progress-bar-animated"
                                 style="width:0%"></div>
                        </div>
                    </div>
                    <div id="chapter_info_edit_div" class=" d-flex flex-wrap p-3">
                        <span class="my_label badge badge-secondary mx-0">章节名称 :</span>
                        <input model="chapterName" type="text" class="form-control d-inline"
                               id="chapter_name_label_edit" maxlength="30">
                        <span class="my_label badge badge-secondary mx-0">章节序号 :</span>
                        <input model="chapterNumber" type="number" class="form-control d-inline"
                               id="chapter_num_label_edit" oninput="if(value>9999)value=9999;if(value<0)value=0;" maxlength="4">
                        <span class="my_label badge badge-secondary mx-0">章节简介 :</span>
                        <textarea model="chapterIntroduction" id="chapter_introduction_label_edit" class="form-control "
                                  rows="5"
                                  style="resize: none" placeholder="未填写章节简介" maxlength="256"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="save_chapter_btn" type="button" class="btn btn-primary">修改章节</button>
                    <button id="delete_chapter_btn" type="button" class="btn btn-danger" data-toggle="modal"
                            data-target="#delete_chapter_modal">删除章节
                    </button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="center_div d-flex justify-content-center pb-3">
        <label id="add_chaper_btn" class="my_button my_button_primary" data-toggle="modal"
               data-target="#add_chapter_modal">添加章节</label>
        <!--        添加章节模态-->
        <div class="modal fade mx-auto my-auto" id="add_chapter_modal">
            <div class="modal-dialog modal-dialog-centered" style="min-width: 40rem;">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">添加章节</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <!--                        <div id="chapter_upload_div" class="p-4">-->
                        <!--                            <div class="mx-auto my-auto d-flex justify-content-center">-->
                        <!--                                <label id="upload_chapter_btn" for="chapter_file"-->
                        <!--                                       class="p-2 my_button my_button_primary">选择文件</label>-->
                        <!--                                <input type="file" id="chapter_file" name="file" style="display:none">-->
                        <!--                            </div>-->
                        <!--                            <div class="d-flex justify-content-center gray_font_color m-1">-->
                        <!--                                <span>文件大小&ensp;:&ensp;</span><span id="file_size">0 M</span>-->
                        <!--                            </div>-->
                        <!--                            <div class="progress">-->
                        <!--                                <div class="progress-bar progress-bar-striped progress-bar-animated"-->
                        <!--                                     style="width:40%"></div>-->
                        <!--                            </div>-->
                        <!--                        </div>-->
                        <div id="chapter_info_add_div" class=" d-flex flex-wrap p-3">
                            <span class="my_label badge badge-secondary mx-0">章节名称 :</span>
                            <input model="chapterName" type="text" class="form-control d-inline"
                                   id="chapter_name_label"
                                   value="" maxlength="30">
                            <span class="my_label badge badge-secondary mx-0">章节序号 :</span>
                            <input model="chapterNumber" type="number" class="form-control d-inline"
                                   id="chapter_num_label"
                                   value="" oninput="if(value>9999)value=9999;if(value<0)value=0;" maxlength="4">
                            <span class="my_label badge badge-secondary mx-0">章节简介 :</span>
                            <textarea model="chapterIntroduction" id="chapter_introduction_label" class="form-control "
                                      rows="5"
                                      style="resize: none" placeholder="未填写章节简介" maxlength="256"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id="add_chapter_btn" type="button" class="btn btn-primary">添加</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--课程编辑模态-->
<div class="modal fade mx-auto my-auto" id="edit_course_info_modal">
    <div class="modal-dialog modal-dialog-centered" style="min-width: 40rem;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">课程信息编辑</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="course_info_edit_div" class=" d-flex flex-wrap p-3">
                    <span class="my_label badge badge-secondary">课程名称 :</span>
                    <input model="courseName" type="text" class="form-control d-inline"
                           id="course_name_label" maxlength="30">
                    <span class="my_label badge badge-secondary ">价格 :</span>
                    <input model="cost" type="number" class="form-control d-inline"
                           id="course_price_label"
                           oninput="if(value>99999)value=99999;if(value<0)value=0;">
                    <span class="my_label badge badge-secondary">第一标签 :</span>
                    <select model="labelFirst" type="email" class="form-control d-inline"
                            id="user_email">
                        <option value="前端开发">前端开发</option>
                        <option value="后端开发">后端开发</option>
                        <option value="前沿技术">前沿技术</option>
                        <option value="数据库">数据库</option>
                        <option value="云计算&大数据">云计算&大数据</option>
                        <option value="运维&测试">运维&测试</option>
                    </select>
                    <span class="my_label badge badge-secondary">第二标签 :</span>
                    <select model="labelSecond" type="text" class="form-control d-inline"
                            id="user_age"></select>
                    <span class="my_label badge badge-secondary">第三标签 :</span>
                    <select model="labelThird" name="gender" type="text" class="form-control d-inline"
                            id="user_gender">
                        <option value="入门">入门</option>
                        <option value="初级">初级</option>
                        <option value="中级">中级</option>
                        <option value="高级">高级</option>
                        <option value="其它">其它</option>
                    </select>
                    <span class="my_label badge badge-secondary">课程简介 :</span>
                    <textarea model="courseIntroduction" id="user_introduction" class="form-control " rows="5"
                              style="resize: none" placeholder="未填写课程简介" maxlength="256"></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button id="save_course_info_btn" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--确认删除章节模态-->
<div class="modal fade mx-auto my-auto" id="delete_chapter_modal">
    <div class="modal-dialog modal-dialog-centered" style="min-width: 40rem;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提醒</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" style="text-align: center;font-size: 1.5rem">
                你确定要删除该章节吗?
            </div>
            <div class="modal-footer">
                <button id="confirm_delete_course_btn" type="button" class="btn btn-danger">删除
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<div id="footer_div" class="mx-auto" style="color: white">
    Copyright &copy; Elearning
</div>

</body>
</html>